<template>
  <div class="widget-item-container">
    <a-form-item v-if="element" :key="element.key" class="widget-view"
      :class="{ active: selectWidget?.key === element.key }" :label="element.label" :rules="element.options.rules">
      <template v-if="element.type === 'input'">
        <a-input readonly :size="config.size" :value="element.options.defaultValue"
          :style="{ width: element.options.width }" :placeholder="element.options.placeholder"
          :maxlength="parseInt(element.options.maxlength)" :prefix="element.options.prefix"
          :suffix="element.options.suffix" :addonBefore="element.options.addonBefore"
          :addonAfter="element.options.addonAfter" :allowClear="element.options.allowClear"
          :disabled="element.options.disabled" />
      </template>

      <template v-if="element.type === 'password'">
        <a-input-password readonly :size="config.size" :value="element.options.defaultValue"
          :style="{ width: element.options.width }" :placeholder="element.options.placeholder"
          :maxlength="element.options.maxlength" :prefix="element.options.prefix" :suffix="element.options.suffix"
          :addonBefore="element.options.addonBefore" :addonAfter="element.options.addonAfter"
          :allowClear="element.options.allowClear" :disabled="element.options.disabled"
          :visibilityToggle="element.options.visibilityToggle" />
      </template>

      <template v-if="element.type === 'textarea'">
        <a-textarea style="resize: none" readonly :size="config.size" :rows="element.options.rows"
          :value="element.options.defaultValue" :style="{ width: element.options.width }"
          :placeholder="element.options.placeholder" :maxlength="element.options.maxlength"
          :showCount="element.options.showCount" :autoSize="element.options.autoSize"
          :allowClear="element.options.allowClear" :disabled="element.options.disabled" />
      </template>

      <template v-if="element.type === 'number'">
        <a-input-number readonly :size="config.size" :value="element.options.defaultValue"
          :style="{ width: element.options.width }" :max="element.options.max" :min="element.options.min"
          :disabled="element.options.disabled" />
      </template>

      <template v-if="element.type === 'radio'">
        <a-radio-group :size="config.size" :value="element.options.defaultValue"
          :style="{ width: element.options.width }" :disabled="element.options.disabled">
          <a-radio v-for="item of element.options.options" :key="item.value" :value="item.value" :style="{
            display: element.options.inline ? 'inline-block' : 'block'
          }">{{ element.options.showLabel ? item.label : item.value }}</a-radio>
        </a-radio-group>
      </template>

      <template v-if="element.type === 'checkbox'">
        <a-checkbox-group :value="element.options.defaultValue" :style="{ width: element.options.width }"
          :disabled="element.options.disabled">
          <a-checkbox v-for="item of element.options.options" :key="item.value" :value="item.value" :style="{
            display: element.options.inline ? 'inline-block' : 'block'
          }">{{
            element.options.showLabel ? item.label : item.value
          }}</a-checkbox>
        </a-checkbox-group>
      </template>

      <template v-if="element.type === 'time'">
        <a-time-picker :size="config.size" :value="element.options.defaultValue"
          :placeholder="element.options.placeholder" :inputReadOnly="element.options.readonly"
          :allowClear="element.options.allowClear" :format="element.options.format"
          :valueFormat="element.options.valueFormat" :disabled="element.options.disabled"
          :style="{ width: element.options.width }" />
      </template>

      <template v-if="element.type === 'date'">
        <a-date-picker :size="config.size" :value="element.options.defaultValue"
          :placeholder="element.options.placeholder" :inputReadOnly="element.options.readonly"
          :allowClear="element.options.allowClear" :format="element.options.format" :disabled="element.options.disabled"
          :style="{ width: element.options.width }" />
      </template>

      <template v-if="element.type === 'rate'">
        <a-rate :value="element.options.defaultValue" :count="element.options.max"
          :allowHalf="element.options.allowHalf" :allowClear="element.options.allowClear"
          :disabled="element.options.disabled" />
      </template>

      <template v-if="element.type === 'select'">
        <a-select :size="config.size" :mode="element.options.mode" :value="element.options.defaultValue"
          :placeholder="element.options.placeholder" :filter-option="handleFilterOption"
          :allowClear="element.options.clearable" :showSearch="element.options.showSearch"
          :disabled="element.options.disabled" :style="{ width: element.options.width }">
          <a-select-option v-for="item of element.options.options" :key="item.value" :value="item.value"
            :label="element.options.showLabel ? item.label : item.value">
            {{ element.options.showLabel ? item.label : item.value }}
          </a-select-option>
        </a-select>
      </template>

      <template v-if="element.type === 'switch'">
        <a-switch :size="config.size === 'large' ? 'default' : config.size" :checked="element.options.defaultValue"
          :checkedChildren="element.options.checkedChildren" :unCheckedChildren="element.options.unCheckedChildren"
          :disabled="element.options.disabled" />
      </template>

      <template v-if="element.type === 'slider'">
        <a-slider :value="element.options.defaultValue" :min="element.options.min" :max="element.options.max"
          :step="element.options.step" :range="element.options.range" :reverse="element.options.reverse"
          :disabled="element.options.disabled" :style="{ width: element.options.width }" />
      </template>

      <template v-if="element.type == 'text'">
        <span>{{ element.options.defaultValue }}</span>
      </template>

      <template v-if="element.type === 'img-upload'">
        <a-upload :name="element.options.file" :action="element.options.action" :accept="element.options.accept"
          :file-list="element.options.defaultValue" :listType="element.options.listType"
          :multiple="element.options.multiple" :disabled="element.options.disabled">
          <SvgIcon v-if="element.options.listType === 'picture-card'" iconClass="insert" />
          <a-button v-else>
            <SvgIcon iconClass="img-upload" style="margin-right: 10px;" />
            点击上传
          </a-button>
        </a-upload>
      </template>

      <template v-if="element.type === 'richtext-editor'">
        <!-- <RichTextEditor
          :value="element.options.defaultValue"
          :disable="element.options.disabled"
          :style="{ width: element.options.width }"
        /> -->
      </template>

      <template v-if="element.type === 'cascader'">
        <a-cascader :size="config.size" :value="element.options.defaultValue" :options="element.options.remoteOptions"
          :placeholder="element.options.placeholder" :allowClear="element.options.allowClear"
          :disabled="element.options.disabled" :style="{ width: element.options.width }" />
      </template>
    </a-form-item>
    <div class="widget-view-action" v-if="selectWidget?.key === element.key">
      <SvgIcon iconClass="copy" @click.stop="$emit('copy')" />
      <SvgIcon iconClass="delete" @click.stop="$emit('delete')" />
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { PropType } from 'vue'
import SvgIcon from './icons/svgIcon.vue'
// import RichTextEditor from '@/components/RichTextEditor.vue'
import type { WidgetForm } from './config/antd.ts'


export default defineComponent({
  name: 'AntdWidgetFormItem',
  components: {
    SvgIcon,
    // RichTextEditor
  },
  props: {
    config: {
      type: Object as PropType<WidgetForm['config']>,
      required: true
    },
    element: {
      type: Object,
      required: true
    },
    selectWidget: {
      type: Object
    }
  },
  emits: ['copy', 'delete'],
  setup() {
    const handleFilterOption = (input: string, option: { label: string }) =>
      option.label.toLowerCase().includes(input)

    return {
      handleFilterOption
    }
  }
})
</script>

<style lang="less" scoped>
@primary-color: #1890ff; // 主色
@primary-background-color: rgba(236, 245, 255, 0.5); // hover背景色
@border-color: #999; // 边框色
@light-border-color: #ccc; // 浅色边框
@text-secondary-color: #909399; // 次要文本色
@danger-color: #f56c6c; // 拖拽幽灵态颜色

.widget-form-list {
  height: 100%;
}

.widget-view {
  padding-bottom: 18px;
  position: relative;
  border: 1px dashed rgba(170, 170, 170, 0.7);
  background-color: rgba(236, 245, 255, 0.3);
  margin: 2px;

  .widget-view-description {
    height: 15px;
    line-height: 15px;
    font-size: 13px;
    margin-top: 6px;
    color: #909399;
  }

  &:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
  }

  &:hover {
    background: @primary-background-color;
    outline: 1px solid @primary-color;
    outline-offset: 0;

    &.active {
      outline: 2px solid @primary-color;
      border: 1px solid @primary-color;
      outline-offset: 0;
    }

  }

  &.active {
    outline: 2px solid @primary-color;
    border: 1px solid @primary-color;
  }

  &.ghost {
    background: #f56c6c;
    border: 2px solid #f56c6c;
    outline-width: 0;
    height: 3px;
    box-sizing: border-box;
    font-size: 0;
    content: '';
    overflow: hidden;
    padding: 0;
  }
}

.widget-view-action {
  position: absolute;
  right: 0;
  // bottom: -2px;
  height: 28px;
  line-height: 28px;
  background: @primary-color;
  z-index: 10;

  .svg-icon {
    font-size: 14px;
    color: #fff;
    margin: 0 5px;
    cursor: pointer;
  }
}

.widget-view-drag {
  position: absolute;
  height: 28px;
  left: 0;
  // top: -2px;
  line-height: 28px;
  background: @primary-color;
  z-index: 100;

  .svg-icon {
    font-size: 14px;
    color: #fff;
    margin: 0 5px;
    cursor: move;
  }
}

.drag-widget {
  cursor: move;
}
</style>